<template>
  <view class="order">
    <view class="order_list">
      <view v-if="list.length > 0">
        <view
          @tap="skip(`/pages/user/msg_detail?msgContent=${item.msgContent}`)"
          class="order_list_item first"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="order_list_item_left">
            <view class="order_list_item_left_top">
              <text class="order_list_item_left_top_l">{{
                item.msgTitle
              }}</text
              ><text class="order_list_item_left_top_r"></text>
            </view>
            <view class="order_list_item_left_buttom">
              <text>{{ item.gmtCreate }}</text>
            </view>
          </view>
          <view class="order_list_item_right">
            <image
              mode="aspectFit"
              :src="resBaseUrl + 'user/right.png'"
              alt=""
            />
          </view>
        </view>
      </view>
	  <view v-else>
	  	<u-divider textSize="34" text="暂无数据"></u-divider>
	  </view>
     <!-- <view style="margin: auto; width: 100%; text-align: center" v-else
        >~ 暂无数据 ~</view
      > -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  onShow() {
    this.$api.qryMessageApi().then((res) => {
      if (res.code == 200) {
        this.list = res.result.list;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f1f1f1;
}

.order {
  background-color: #f1f1f1;
  height: 100vh;
  padding: 26rpx;

  .header_btn {
    display: flex;

    button {
      height: 58rpx;
      line-height: 58rpx;
      background: #fe3430;
      border-radius: 49rpx;
      color: #fff;
      margin-left: 0;
      margin-right: 10rpx;
    }
  }

  .order_list {
    .order_list_item {
      padding: 28rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 10rpx;

      .order_list_item_left {
        width: 92%;
        color: #bdbdbd;

        .order_list_item_left_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;

          .order_list_item_left_top_l {
            font-size: 0.9375rem;
            font-weight: 600;
            color: #000;
          }
        }

        .order_list_item_left_buttom {
          text {
            margin-right: 20rpx;
          }
        }
      }

      .order_list_item_right {
        image {
          width: 12rpx;
          height: 24rpx;
        }
      }
    }

    .first {
      margin-top: 5rpx;
    }
  }
}
</style>
